<template lang="pug">
transition(name="fade")
  .header-detail(v-show="visible")
    .content
      .title {{seller.name}}
      .star
        Star(:size=48 :score="seller.score")
      .discount-title
        .line
        .title 优惠信息
        .line
      ul.supports
        li.support-item(v-for="(item,index) in seller.supports" :key="index")
          SupportIcon.icon(:size=2 :type="item.type")
          span.text {{item.description}}
      .bulletin
        .title-wrapper
          .line
          .title 商家公告
          .line
        .text {{seller.bulletin}}
    .close
      span.icon.iconfont.iconbaseline-close-px(@click="hide")
</template>

<script>
import Star from '~/components/star/star'
import SupportIcon from '~/components/support-icon/support-icon'

export default{

  name: 'header-detail',

  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  components: {
    Star,
    SupportIcon
  },

  data() {
    return {
      visible:false
    }
  },

  methods: {
    show() {
      console.log('header-detail.show')
      this.visible = true
      console.log(this.visible)
    },
    hide() {
      console.log('header-detail.hide')
      this.visible = false
      console.log(this.visible)
    }
  }

}
</script>

<style lang="stylus" scoped>
@import '../../static/common/stylus/variable'

.header-detail
  position:fixed
  top:0
  left:0
  width:100%
  height: 100%
  background:$color-background-s
  //- 监听.header-detail下所有属性变更
  //- fade-enter-active:v-show由false变为true时，动画执行的第一帧，添加此样式，动画执行完毕，删除此样式
  //- fade-leave-active:v-show由true变为false时，动画执行的第一帧，添加此样式，动画执行完毕，删除此样式
  &.fade-enter-active, &.fade-leave-active
    transition: all 1s
  //- fade-enter:v-show由false变为true时，动画执行的第一帧,添加此样式，第二帧删除此样式
  //- fade-enter-to:v-show由false变为true时，动画最后一帧,添加此样式。动画执行完毕，删除此样式。
  //- fade-leave:v-show由true变为false时,动画执行的第一帧,添加此样式，第二帧删除此样式
  //- fade-leave-to:v-show由false变为true时,动画最后一帧,添加此样式。动画执行完毕，删除此样式。
  &.fade-enter, &.fade-leave-to
    opacity: 0
  .content
    width:100%
    margin-top: 64px
    .title
      text-align:center
      color: rgb(255,255,255)
      font-size:$fontsize-large
      font-weight:700
    .star
      margin-top:16px
      >>> .star
        justify-content:center
    .discount-title
      display:flex
      justify-content:center
      width:80%
      margin:28px auto 0 auto
      .line
        flex:1
        border-top:solid 1px rgba(255,255,255,0.2)
        height:1px
        position:relative
        top:7px
      .title
        margin:0 12px
        font-size:$fontsize-medium
    .supports
      margin-top:24px
      margin-left:36px
      .support-item
        text-align:left
        margin-bottom:12px
        .icon
          margin-left:12px
          width:16px
          height:16px
        .text
          margin-left:6px
          font-size:$fontsize-small
          font-weight:200
          color:rgb(255,255,255)
    .bulletin
      margin-top:28px      
      .title-wrapper
        display:flex
        width:80%
        margin:0 auto
        .line
          flex:1
          border-top:solid 1px rgba(255,255,255,0.2)
          position:relative
          top:13px
        .title
          margin:0 12px
          font-size:$fontsize-medium
          font-weight:700
          color:rgb(255,255,255)
          line-height:28px
      .text
        margin:24px 50px 0 50px
        text-align:left
        font-size:$fontsize-small
        font-weight:200
        line-height: 24px
        color:rgb(255,255,255)
  .close
    position:absolute
    text-align:center
    width:100%
    bottom:32px
    color:rgba(255,255,255,0.5)
    .icon
      font-size:34px

</style>